<template>
  <el-container id="login-box">
    <div class="topbar">
      <div></div>
    </div>
    <div id="login-msgbox" class="login-msgbox">
      <div slot="header" class="log-top">
        <img class="logo" src="@assets/images/footer-logo.png" />
        <div class="tit">两江新区水环境大数据系统</div>
      </div>
      <el-form
        :model="loginForm"
        ref="loginForm"
        style="width: 400px; margin: 20px auto"
      >
        <el-form-item
          prop="userName"
          :rules="filter_rules({ maxLength: 20 })"
          label="账号"
          label-width="70px"
        >
          <el-input
            v-model="loginForm.userName"
            suffix-icon="el-icon-edit"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="userPassword"
          :rules="filter_rules({ min: 6, max: 20 })"
          label="密码"
          label-width="70px"
        >
          <el-input
            v-model="loginForm.userPassword"
            type="password"
            @keyup.enter.native="submitForm('loginForm')"
            suffix-icon="el-icon-edit"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div style="display: flex; justify-content: center">
            <el-button
              type="primary"
              size="mini"
              :loading="isClick"
              @click="submitForm('loginForm')"
              >登陆</el-button
            >
          </div>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <a
          href="https://www.google.cn/chrome/"
          target="view_window"
          >为了良好的用户体验，请下载使用谷歌浏览器</a
        >
      </div>
    </div>
  </el-container>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      loginForm: {},
      isClick: false,
    };
  },
  created() {
    document.title = "两江新区水环境大数据系统";
    localStorage.clear();
  },
  methods: {
    submitForm() {
      const _this = this;
      _this.isClick = true;
      _this.$refs.loginForm.validate(function (valid) {
        if(!valid){
          _this.isClick = false;
          return false
        }
        localStorage.setItem("accessToken", '11111111');
        localStorage.setItem("userInfo", JSON.stringify({name: 'aaa', sex:'man'}));
        _this.$router.push({name: 'list',params:{ id:'1'}});
        //输入数据验证
        // _this.$axios
        //   .post($api_router.login, _this.loginForm)
        //   .then((res) => {
        //       if (res.code == "0000") {
        //         localStorage.setItem("accessToken", res.data.sessionId);
        //         localStorage.setItem("userInfo", JSON.stringify(res.data));
        //         //跳转页面
        //         _this.$router.push("/").catch((err) => {
        //           err;
        //         });
        //       } else {
        //         _this.$message.warning(res.msg);
        //         _this.isClick = false;
        //         _this.$refs.child.reset();
        //       }
        //     });
        
      });
    },
    onSuccess() {
      this.$message.success("验证成功！");
      this.loginForm.validCode = 1;
    },
    onFail() {
      this.$message.warning("验证失败！");
      this.loginForm.validCode = 0;
    },
  },
};
</script>

<style scoped>
#login-box {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("~@assets/images/bg.jpg") no-repeat 0 0;
  background-size: cover;
}
.topbar {
  width: 100%;
  margin: 30px 0;
}

.login-msgbox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px 20px;
}

.log-top .logo {
  display: block;
  margin: auto;
  margin-bottom: 20px;
}
.log-top .tit {
  color: #333;
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
}

.login-msgbox .el-form-item .el-button {
  width: 200px;
  height: 40px;
  font-size: 16px;
  margin-bottom: 10px;
}
</style>
